<template>
  <div>
    <el-descriptions class="margin-top" :column="2" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          发布人
        </template>
        {{ sysNotice.createBy }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          发布时间
        </template>
        {{ sysNotice.createTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          通知类型
        </template>
        <dict-tag :value="sysNotice.noticeType" :dataList="typeOptions"></dict-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          状态
        </template>
        <dict-tag :value="sysNotice.status" :dataList="statusOptions"></dict-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          公告内容
        </template>
        <div v-html="sysNotice.noticeContent"></div>
      </el-descriptions-item>
    </el-descriptions>
    <div style="text-align: center;margin-top: 5px">
      <el-button  size="small" @click="$emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<script>
import sysNoticeApi from "@/api/system/sysNotice";

export default {
  name: "sys-notice-info",
  props: {
    activeId: {
      type: Number,
      default: undefined
    }
  },
  watch: {
    activeId: {
      immediate: true,
      handler: function (newVal, oldVal) {
        this.getById(newVal)
      }
    }
  },
  data() {
    return {
      //通知公告对象
      sysNotice: {status: 0, noticeType: 1},
      //通知公告状态的字典数据
      statusOptions: [],
      //通知公告类型的字典数据
      typeOptions: [],
    }
  },
  created() {
    this.getDataByType("sys_notice_status").then(res => {
      this.statusOptions = res.data;
    })
    this.getDataByType("sys_notice_type").then(res => {
      this.typeOptions = res.data;
    })
  },
  methods: {
    //根据ID查询通知公告
    getById(noticeId) {
      sysNoticeApi.get(noticeId).then(res => {
        this.sysNotice = res.data;
      })
    }
  }
}
</script>

<style scoped>

</style>
